<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no, viewport-fit=cover" />
    <meta http-equiv="Content-Security-Policy-Report-Only" />
    <title>回溯管理</title>
    <link rel="stylesheet" href="../../assets/libs/amazeui/css/amazeui.min.css" />
    <link rel="stylesheet" href="../../assets/libs/amazeui/css/amazeui.datatables.min.css" />
    <link rel="stylesheet" href="../../assets/libs/amazeui/css/app.css?v2017010301">
    <link rel="stylesheet" href="../../assets/css/core.css?v2017010301">
</head>

<body>
    <div id="app">
        <!-- 用户信息 -->
        <div class="user-info-list" v-show='showList'>
            <div class="list_title">录屏详情</div>
            <ul>
                <li><span>数据主键:</span><span> {{user_info.id}}</span></li>
                <li><span>业务识别号:</span><span> {{user_info.businessNo}}</span></li>
                <li><span>设备信息:</span><span> {{user_info.phoneModel}}</span></li>
                <li><span>系统名称:</span><span> {{user_info.sysName}}</span></li>
                <li><span>投保人姓名:</span><span> {{user_info.appliName}}</span></li>
                <li><span>产品编号:</span><span> {{user_info.productCode}}</span></li>
                <li><span>总保费:</span><span> {{user_info.totalPremium}}</span></li>
                <li><span>上传时间:</span><span> {{user_info.uploadTime}}</span></li>

                <li><span>审核状态:</span><span> {{stateValue}}</span></li>

            </ul>
        </div>
        <!-- 访问页面 -->
        <div class='pageBox' v-show='showList'>
            <div class="list_title">用户访问轨迹</div>
            <ul>
                <li></li>
            </ul>
        </div>
        <!-- 访问次数 -->
        <div class='user-info' v-show='showList'>
            <div class="list_title">访问记录</div>
            <ul>
                <li v-for='(item,index) in userList' :key='index'>{{item.userList}}于{{item.optTime}}查看</li>
            </ul>
            <div class="am-u-sm-12 am-u-sm-12 am-u-sm-12 del-padding" style="padding-bottom:2%">
                <div class="am-form-group am-u-sm-12">
                    <div class="am-u-sm-6  am-u-md-6  am-u-lg-6 ">
                        <button id="keep" type="button" class="am-btn am-btn-danger tpl-btn-bg-color-success am-btn-xs" @click='sure("1")' style="float:right;margin-right:10%">
                            <span class="am-icon-check"></span>&nbsp;通过
                    </button>
                    </div>
                    <div class="am-u-sm-6 am-u-md-6 am-u-lg-6">
                        <button type="button" class="am-btn am-btn-danger tpl-btn-bg-color-success am-btn-xs" @click='backLast()' style="margin-right:10%">
                        <span class="am-icon-reply"></span>&nbsp;返回
                    </button>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <!-- <iframe src="iframe.html" frameborder="0" id="iframe"></iframe> -->
    <!-- <script id="time-cat" src="./timecat.js"></script> -->
    <script id="time-cat" src="../../assets/libs/timecatjs.min.js"></script>
    <script src="../../assets/libs/axios.min.js"></script>
    <script src="../../assets/libs/vue/vue.min.js"></script>
    <script src="../../assets/env.js?v2017010301"></script>
    <!-- <script type="text/javascript" src="data.json"></script> -->
    <script id="time-cat-init">
        if (window.__ReplayStrData__) {
            timecat.replay();
            // var style = '<style>::-webkit-scrollbar {width: 3px !important;}</style>';
            // var ele = document.createElement('div');
            // ele.innerHTML = style;
            // document.getElementsByTagName('head')[0].appendChild(ele.firstElementChild)
        } else {
            var app = new Vue({
                el: "#app",
                data: {
                    userList: [],
                    user_info: {},
                    stateValue: "",
                    id: '',
                    businessNo: "",
                    showList: false,
                },
                methods: {
                    sure(value) {
                        const _this = this
                        let obj = {
                            id: _this.id, //, //数据主键id
                            businessNo: _this.businessNo, //, //业务识别号（保单号）
                            auditState: value == '1' ? '1' : '2'
                        }
                        console.log(obj)
                        axios({
                                method: 'post',
                                url: App.envUrl.backtrackUrl+'collect/updateCollect',
                                data: obj,
                            })
                            .then((data) => {
                                window.location.href =
                                    "nrrback.html"
                            })
                            .catch((err) => {});
                    },
                    backLast() {
                        window.location.href =
                            "nrrback.html"
                    }


                },
                created() {
                    const _this = this
                    var query = window.location.search.substring(1);
                    var vars = query.split("&");
                    var id = ''
                    var businessNo = ''
                    console.log(id)
                    for (var i = 0; i < vars.length; i++) {
                        var pair = vars[i].split("=");
                        if (pair[0] == 'id') {
                            id = pair[1];
                            _this.id = id
                        }
                        if (pair[0] == 'businessNo') {
                            businessNo = pair[1];
                            _this.businessNo = businessNo
                        }
                    }
                    // console.log(id);
                    let obj = {
                        id: id, //数据主键id
                        businessNo: businessNo, //业务识别号（保单号）
                    }
                    axios({
                            method: 'post',
                            url: App.envUrl.backtrackUrl+"collect/queryDataFile",
                            data: obj,
                        })
                        .then((data) => {
                            console.log(data, '1111')
                            var lastJson = data.data.data
                            console.log(data.data.userList)
                            _this.userList = data.data.userList
                            console.log(_this.userList)
                            openMido(lastJson)
                            _this.showList = true
                        })
                        .catch((err) => {});

                    let obj1 = {
                        id: id, //数据主键id
                        businessNo: businessNo, //业务识别号（保单号）

                    }
                    axios({
                            method: 'post',
                            url: App.envUrl.backtrackUrl+'collect/queryDataList',
                            data: obj1,
                        })
                        .then((data) => {
                            _this.user_info = data.data.data[0]
                                // _this.stateValue = ''
                            console.log(data.data)
                            if (_this.user_info.auditState == 0) {
                                _this.stateValue = '未审核'
                            } else if (_this.user_info.auditState == 1) {
                                _this.stateValue = '通过'
                            } else if (_this.user_info.auditState == 2) {
                                _this.stateValue = '拒绝'
                            }
                        })
                        .catch((err) => {});

                    function openMido(lastJson) {
                        var db = null;
                        var request = window.indexedDB.open("cat_db", 1);
                        request.onerror = function(event) {
                            // 错误处理
                            console.log(" 打开数据库报错");
                        };
                        request.onsuccess = function(event) {
                            // 成功处理
                            db = event.target.result;

                            // if (db.objectStoreNames.contains("cat_data")) {
                            //     var transaction =  db.transaction(['cat_data'],  'readwrite') 
                            //     var objectStore = transaction.objectStore("cat_data");
                            //     console.log(objectStore, '2')
                            //         // objectStore.delete(1);
                            // }

                            if (!db.objectStoreNames.contains("cat_data")) {
                                const objectStore = db.createObjectStore("cat_data", {
                                    autoIncrement: true,
                                    keyPath: "id",
                                });
                                objectStore.createIndex("type", "type", {
                                    unique: false,
                                });
                                objectStore.createIndex("data", "data", {
                                    unique: false,
                                });
                                objectStore.createIndex("time", "time", {
                                    unique: false,
                                });
                            }
                            var transaction = db.transaction(["cat_data"], "readwrite");
                            var objectStore = transaction.objectStore("cat_data");
                            objectStore.clear();
                            lastJson.forEach(function(ele) {
                                objectStore.add(JSON.parse(ele));
                                // objectStore.add(ele);
                            });
                            timecat.replay({
                                    autoplay:  true
                                })
                                // var headEl = document.getElementById('cat-sandbox').contentWindow.document.head;
                                // var divEl = document.createElement('div');
                                // divEl.innerHTML = '<style>::-webkit-scrollbar {width: 3px !important;}</style>';
                                // headEl.appendChild(divEl.firstElementChild);
                                // var style = '<style> #cat-main {width: 10px !important;}</style>';
                                // var ele = document.createElement('div');
                                // ele.innerHTML = style;


                        };
                    }

                },
            });
        }
    </script>
    <style>
        .user-info-list {
            position: absolute;
            left: 490px;
            width: 500px;
            float: right;
            height: 300px;
        }
        
        .user-info-list ul {
            margin: 0px;
            width: 100%;
            height: 270px;
            border: 1px solid #ccc;
            border-radius: 5px;
            list-style: none;
            padding-left: 0px;
            box-sizing: border-box;
            overflow: hidden;
        }
        
        .user-info-list ul li {
            width: 100%;
            color: #838FA1;
            min-height: 30px;
            line-height: 30px;
            clear: both;
            padding-left: 5px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .user-info-list ul li:nth-child(2n-1) {
            background: #f7f8fa;
        }
        
        .user-info-list ul li:nth-child(2n) {
            background: #fff;
        }
        
        .user-info-list ul li span:nth-child(1) {
            float: left;
            width: 18%;
        }
        
        .user-info-list ul li span:nth-child(2) {
            float: left;
            width: 80%;
        }
        
        .user-info-list ul li {
            list-style: none;
        }
        
        .pageBox {
            position: absolute;
            top: 310px;
            width: 500px;
            float: right;
            left: 490px;
            height: 150px;
        }
        
        .pageBox ul {
            border: 1px solid #ccc;
            border-radius: 5px;
            margin: 0px;
            padding-left: 5px;
            box-sizing: border-box;
            height: 120px;
            overflow-y: scroll;
        }
        
        .user-info {
            position: absolute;
            top: 470px;
            width: 500px;
            float: right;
            left: 490px;
            height: 150px;
        }
        
        .user-info ul {
            border: 1px solid #ccc;
            border-radius: 5px;
            margin: 0px;
            padding-left: 5px;
            margin-bottom: 20px;
            box-sizing: border-box;
            height: 120px;
            overflow-y: scroll;
        }
        
        .user-info ul li {
            text-align: center;
            height: 30px;
            line-height: 30px;
            font-size: 14px;
            list-style: none;
            text-align: left;
            color: #838FA1;
        }
        
        .list_title {
            height: 30px;
            line-height: 30px;
        }
        
        .audit {
            text-align: center;
        }
        
        #app {
            height: auto;
            position: absolute;
            width: 100%;
            height: 100%;
            /* left: 510px;
            top: 0px; */
        }
        
        #cat-main {
            height: 620px !important;
            left: 10px !important;
            top: 0px !important;
            width: 450px !important;
        }
        /*滚动条样式*/
        
         ::-webkit-scrollbar {
            width: 3px !important;
        }
        
         ::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            background: rgba(0, 0, 0, 0.2);
        }
        
         ::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            border-radius: 0;
            background: rgba(0, 0, 0, 0.1);
        }
        
        #cat-player {
            /* height: 500px;
            width: 500px; */
        }
    </style>
</body>

</html>